<template>
	<view class="y-flex y-flex-1">
		<com-tabs
		:current="currentSync"
		:column="column"
		:bg-color="bgColor"
		:text-color="textColor"
		:border-color="borderColor"
		:selected-color="selectedColor"
		:data="data"
		@change="handleTabsChange"
		v-if="tabsShow">
			<view slot="right" v-if="$slots.right">
				<slot name="right"></slot>
			</view>
		</com-tabs>
		<view class="y-flex y-row y-flex-1">
			<slot name="left"></slot>
			<view class="y-flex y-flex-1">
				<swiper :current="enableSwiper ? currentSync : 0" class="y-flex-1" :duration="300" @change="handleTabsChange($event.detail)">
					<template v-if="enableSwiper">
						<swiper-item class="y-flex y-flex-1" v-for="(swiper, i) in data" :key="i">
							<slot :swiper="swiper" :i="i"></slot>
						</swiper-item>
					</template>
					<template v-else>
						<swiper-item class="y-flex y-flex-1" v-if="data[currentSync]">
							<slot :swiper="data[currentSync]" :i="currentSync"></slot>
						</swiper-item>
					</template>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			current: {
				type: Number,
				default: 0
			},
			column: {
				type: [Number, String],
				default: 'auto'
			},
			textColor: {
				type: String,
				default: '#333333'
			},
			selectedColor: {
				type: String,
				default: '#2196F5'
			},
			borderColor: {
				type: String,
				default: '#eee'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			tabsShow: {
				type: Boolean,
				default: true
			},
			enableSwiper: {
				type: Boolean,
				default: true
			}
		},
		data () {
			return {
				currentSync: 0
			}
		},
		created () {
			this.currentSync = this.current
		},
		methods: {
			handleTabsChange (e) {
				this.currentSync = e.current
				this.$nextTick(function () {
					this.$emit('change', { current: this.currentSync })
					this.$emit('update:current', this.currentSync)
				})
			}
		},
		watch: {
			current (newVal) {
				if ( newVal != this.currentSync ) {
					this.currentSync = newVal
				}
			}
		}
	}
</script>

<style>
</style>